<template>
  <div>
    <el-row class="bg">
      <el-col :span="12">
        <el-form label-width="150px" :model="dataform">
          <el-form-item prop="name" label="公司名称">
            <el-input
              v-model="dataform.name"
              clearable
              placeholder="系统名称"
              style="width: 26.9vw"
			  :disabled="settingStatus"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="background" label="系统背景图片">
            <div class="hxImg" v-if="dataform.background">
              <img
                :src="url"
                class="picCover"
                alt="背景图片"
                style="width: 100%"
              />
              <div class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview()"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
               <!-- <span
                  class="el-upload-list__item-preview"
                  @click="handleRemove()"
                >
                  <i class="el-icon-delete"></i>
                </span> -->
              </div>
            </div>
            <el-upload
              v-else
              v-model="dataform.background"
              :action="ImgUrl"
              list-type="picture-card"
              :headers="headers"
              :limit="1"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog title="背景图片" :visible.sync="dialogVisible">
              <img width="100%" :src="url" alt="" />
            </el-dialog>
            <!-- <div class="list-img-box">
						    <div v-if="dataform.background !== ''" style="width:190px;height:145px" >
						        <img style="width:100%;height:100%" @click="cutPicture('qy',dataform.background)" src=""  alt="自定义封面" />
						    </div>
						    <div v-else class="upload-btn" style="width:190px;height:145px" @click="cutPicture('qy')">
						        <i class="el-icon-plus" style="font-size: 30px;"></i>
						        <span>上传系统背景图片</span>
						    </div>
						</div> -->
            <!-- <div class="el-upload__tip">只能上传jpg/png/gif文件</div> -->
          </el-form-item>
          <el-form-item prop="lineName" label="当前系统所属线路">
			  <el-input
			    v-model="dataform.lineName"
			    clearable
			    placeholder="当前系统所属线路"
			    style="width: 26.9vw"
			  >
			  </el-input>
            <!-- <el-select
              class="selectWidth"
              v-model="dataform.lineId"
              placeholder="请选择"
              @change="changeLine"
            >
              <el-option
                v-for="(item, index) in options1"
                :key="item.index"
                :label="item.lineName"
                :value="item.lineId"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item prop="stationName" label="当前系统所属站点">
			  <el-input
			    v-model="dataform.stationName"
			    clearable
			    placeholder="当前系统所属站点"
			    style="width: 26.9vw"
			  >
			  </el-input>
           <!-- <el-select
              class="selectWidth"
              v-model="dataform.stationId"
              :disabled="dataform.lineId == ''"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options2"
                :key="index"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item prop="doorConfigId" label="当前系统门配置">
			  <el-upload v-model="dataform.doorConfigId" accept=".txt" class="upload-demo"
			  	:headers="headers" :action="ImgUrl" :before-upload="beforeUploadDoor" :on-preview="handleDownLoadDoor"
			  	:on-success="handleSuccessDoor" :on-remove="handleRemoveDoor" :limit="1" :file-list="fileList"
			  	style="text-align: left;">
			  	<el-button size="small" type="primary">上传配置文件</el-button>
			  	<!-- <div slot="file" slot-scope="{file}" >
			  		<span class="el-upload-list__item-actions">
			  			<span class="el-upload-list__item-delete" @click="handleDownLoad(file)">
			  					<i class="el-icon-download" />
			  			</span>
			  		</span>
			  	</div> -->
			  
			  </el-upload>
           <!-- <el-select
              class="selectWidth"
              v-model="dataform.doorConfigId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options3"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item prop="pslNum" label="PSL个数">
            <el-input-number
              class="selectWidth"
              v-model="dataform.pslNum"
              controls-position="right"
              :min="0"
              :max="3"
			  :disabled="settingStatus"
            ></el-input-number>
            <div class="el-upload__tip" style="text-align: left">
              PSL个数最大为3个
            </div>
          </el-form-item>
		  <el-form-item prop="secUpOrder" label="安全回路上行顺序">
		    <el-select
		      class="selectWidth"
		      v-model="dataform.secUpOrder"
		      placeholder="请选择"
		    >
		      <el-option
		        v-for="(item, index) in safeoptions1"
		        :key="item.index"
		        :label="item.label"
		        :value="item.value"
		      ></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item prop="secDownOrder" label="安全回路下行顺序">
		    <el-select
		      class="selectWidth"
		      v-model="dataform.secDownOrder"
		      placeholder="请选择"
		    >
		      <el-option
		        v-for="(item, index) in safeoptions1"
		        :key="item.index"
		        :label="item.label"
		        :value="item.value"
		      ></el-option>
		    </el-select>
		  </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form
          :inline="true"
          :model="dataform"
          label-width="180px"
          :rules="dataRule"
          style="padding-left: 40px"
        >
          <h3 class="baseHeader" style="text-align: left">PEDC</h3>
          <div style="dsiplay: flex">
            <el-form-item prop="pedca" label="A COM">
              <el-select
                class="selectWidth"
                v-model="dataform.pedca"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in PEDAoptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- <el-input v-model="dataform.pedca"></el-input> -->
            </el-form-item>
            <el-form-item prop="pedcaCpu" label="cpu">
              <el-select
                class="selectWidth"
                v-model="dataform.pedcaCpu"
                placeholder="请选择"

              >
                <el-option label="cpu0" :value="'0'"></el-option>
                <el-option label="cpu1" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="pedcaBrate" label="波特率">
              <el-input v-model="dataform.pedcaBrate"></el-input>
            </el-form-item>
          </div>
          <div style="dsiplay: flex">
            <el-form-item prop="pedcb" label="B COM">
              <!-- <el-input v-model="dataform.pedcb"></el-input> -->
              <el-select
                class="selectWidth"
                v-model="dataform.pedcb"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in PEDAoptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="pedcbCpu" label="cpu">
              <el-select
                class="selectWidth"
                v-model="dataform.pedcbCpu"
                placeholder="请选择"
              >
                <el-option label="cpu0" :value="'0'"></el-option>
                <el-option label="cpu1" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="pedcbBrate" label="波特率">
              <el-input v-model="dataform.pedcbBrate"></el-input>
            </el-form-item>
          </div>
          <h3 class="baseHeader" style="text-align: left">DCU</h3>
          <el-form-item prop="udpIp1" label="本地IP1">
            <el-input v-model="dataform.udpIp1" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="udpPort1" label="本地端口">
            <el-input v-model="dataform.udpPort1" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="udpIp2" label="本地IP2">
            <el-input v-model="dataform.udpIp2" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="udpPort2" label="本地端口">
            <el-input v-model="dataform.udpPort2" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="dcua" label="DCUA IP">
            <el-input v-model="dataform.dcua" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="dcuaPort" label="端口">
            <el-input v-model="dataform.dcuaPort" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="dcub" label="DCUB IP">
            <el-input v-model="dataform.dcub" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="dcubPort" label="端口">
            <el-input v-model="dataform.dcubPort" :disabled="settingStatus"></el-input>
          </el-form-item>
         <!-- <el-form-item prop="uploadCycle" label="dcu上传升级包周期间隔">
            <el-input v-model="dataform.uploadCycle" :disabled="settingStatus"></el-input>
          </el-form-item>
		  <el-form-item prop="uploadCycle" label="dcu上传升级包大小">
		    <el-input v-model="dataform.uploadSize" :disabled="settingStatus"></el-input>
		  </el-form-item>
          <el-form-item prop="distAcceleration" label="加速段距离">
            <el-input v-model="dataform.distAcceleration" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="distUniform" label="匀速段距离">
            <el-input v-model="dataform.distUniform" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="distDeceleration" label="减速段距离">
            <el-input v-model="dataform.distDeceleration" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="distSlow" label="慢速段距离">
            <el-input v-model="dataform.distSlow" :disabled="settingStatus"></el-input>
          </el-form-item>
          <el-form-item prop="mass" label="质量">
            <el-input
              v-model="dataform.mass"
              clearable
              style="width: 187px"
			  :disabled="settingStatus"
            >
            </el-input>
          </el-form-item> -->
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 5.1vw;
            "
          >
            <el-button type="primary" @click="confirm">确认</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
    <cropper ref="cropper1" @getImage="getImage"></cropper>
  </div>
</template>

<script>
import cropper from "@/components/cropperImage-dialog.vue";
import Cookies from "js-cookie";
import { clearLoginInfo } from "@/utils";
export default {
  components: {
    cropper,
  },
  data() {
    return {
      dataform: {
        name: "",
        background: "",
        lineId: "",
        stationId: "",
        doorConfigId: "",
        pslNum: "",
        pedca: "",
        pedcaBrate: "",
        pedcaCpu: 0,
        pedcb: "",
        pedcbCpu: 0,
        pedcbBrate: "",
        dcua: "",
        dcuaPort: "",
        dcub: "",
        dcubPort: "",
        mass: "",
        udpIp1: "",
        udpPort1: "",
        udpIp2: "",
        udpPort2: "",
        uploadCycle: "",
		uploadSize:'',
        distAcceleration:"",
        distUniform:"",
        distDeceleration:"",
        distSlow:"",
		secUpOrder:'',
        secDownOrder:'',
      },
      ImgUrl: window.SITE_CONFIG["apiURL"] + "/psc/systemshow/uploader",
      headers: {
        Authorization: Cookies.get("token"),
      },
      url: "",
      dialogVisible: false,
      options1: [],
      options2: [],
      options3: [],
      PEDAoptions: [], //串口的options
	  settingStatus:true,
	  fileList:[],
	  safeoptions1:[
		  {
			  value:'0',
			  label:'正序'
		  },
		  {
			  value:'1',
			  label:'倒序'
		  }
	  ]
    };
  },
  computed: {
    dataRule() {
      return {
        lineId: [
          {
            required: true,
            message: "当前系统所属线路不能为空",
            trigger: "blur",
          },
        ],
        stationId: [
          {
            required: true,
            message: "当前系统所属站点不能为空",
            trigger: "blur",
          },
        ],
        doorConfigId: [
          {
            required: true,
            message: "当前系统门配置不能为空",
            trigger: "blur",
          },
        ],
      };
    },
  },
  activated() {
    // this.getLine();
    // this.getdoorList();
    this.getStationName();
    this.getSystemData();
    this.getpdcaData();
  },
  methods: {
    getLine() {
      this.$http.get("/psc/line/list").then((res) => {
        this.options1 = res.data.data;
      });
    },
    getStationName(id) {
		if(id){
			this.$http.get(`/psc/station/sortList/${id}`).then((res) => {
			  this.options2 = res.data.data;
			});
		}
    },
    getdoorList() {
      this.$http.get("/psc/doorconfig/page").then((res) => {
        this.options3 = res.data.data.list;
      });
    },
    //获取pedca的options
    getpdcaData() {
      this.$http.get("/serial/info/ports").then((res) => {
        this.PEDAoptions = res.data.data;
      });
    },
    // changeLine() {
    //   this.dataform.stationId = "";
    //   this.getStationName(this.dataform.lineId);
    // },
    getSystemData() {
      this.$http.get(`/psc/systemshow`).then((res) => {
        if (res.data.code == 0) {
          this.dataform.name = res.data.data.sys.name;
          Cookies.set("systemname", res.data.data.sys.name);
          Cookies.set("background", res.data.data.sys.backGround);
          this.dataform.background = res.data.data.sys.backGround;
          this.url = this.dataform.background;
          // this.dataform.lineId = res.data.data.sys.lineId;
		  // this.dataform.lineName =  res.data.data.sys.lineName;
		  this.$set(this.dataform,'lineName',res.data.data.sys.lineName)
          // this.dataform.stationId = res.data.data.sys.stationId;
		  // this.dataform.stationName = res.data.data.sys.stationName;
		   this.$set(this.dataform,'stationName',res.data.data.sys.stationName)
          this.dataform.doorConfigId = res.data.data.sys.doorConfigId;
          this.dataform.pslNum = res.data.data.sys.pslNum;
          this.getStationName(res.data.data.sys.lineId);
		  
          this.dataform.pedca = res.data.data.pedc.pedcaCom;
          this.dataform.pedcaCpu = res.data.data.pedc.pedcaCpu;
          this.dataform.pedcaBrate = res.data.data.pedc.pedcaBaudRate;
          this.dataform.pedcb = res.data.data.pedc.pedcbCom;
          this.dataform.pedcbCpu = res.data.data.pedc.pedcbCpu;
          this.dataform.pedcbBrate = res.data.data.pedc.pedcbBaudRate;
		  
          this.dataform.dcua = res.data.data.dcu.dcuaIp;
          this.dataform.dcuaPort = res.data.data.dcu.dcuaPort;
          this.dataform.dcub = res.data.data.dcu.dcubIp;
          this.dataform.dcubPort = res.data.data.dcu.dcubPort;
          this.dataform.mass = res.data.data.dcu.mass;
          this.dataform.udpIp1 = res.data.data.dcu.udpIp1;
          this.dataform.udpPort1 = res.data.data.dcu.udpPort1;
          this.dataform.udpIp2 = res.data.data.dcu.udpIp2;
          this.dataform.udpPort2 = res.data.data.dcu.udpPort2;
          this.dataform.uploadCycle = res.data.data.dcu.uploadCycle;
          this.dataform.distAcceleration = res.data.data.dcu.distAcceleration;
          this.dataform.distUniform = res.data.data.dcu.distUniform;
          this.dataform.distDeceleration = res.data.data.dcu.distDeceleration;
          this.dataform.distSlow = res.data.data.dcu.distSlow;
		  this.dataform.uploadSize = res.data.data.dcu.uploadSize
		  this.dataform.secUpOrder = res.data.data.sys.secUpOrder
		  this.dataform.secDownOrder = res.data.data.sys.secDownOrder 
        }
      });
    },
    beforeUpload(file) {
      const isRightFile =
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg";
      if (!isRightFile) {
        this.$message.error("上传图片格式错误!");
        return false;
      }
    },
    handleSuccess(res) {
      if (res.code == 0) {
        this.dataform.background = res.data;
        this.url =  this.dataform.background;
      }
    },
    handlePictureCardPreview() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.url =  this.dataform.background;
      });
    },
    handleRemove() {
      this.dataform.background = "";
    },
    getImage(data) {
      // this.enpriDataForm.logoInput = data.url
    },
    cutPicture(name, url) {
      let width, height;
      width = 1920;
      height = 1080;
      this.$refs["cropper1"].uploadPicture(name, url, width, height);
    },
    confirm() {
      var obj = {
        id: 1,
        ...this.dataform,
      };
      this.$http.put("/psc/systemshow", obj).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              Cookies.set("systemname", this.dataform.name);
              Cookies.set("background", this.dataform.background);
              Cookies.set("pslNum", this.dataform.pslNum);
              // clearLoginInfo()
              // this.$router.push({ name: 'login' })
            },
          });
        }
      });
    },
	beforeUploadDoor(file) {
		const isRightFile =
			file.type === "text/plain"
		if (!isRightFile) {
			this.$message.error("上传文件格式错误!");
			return false;
		}
		if (this.fileList.length == 1) {
			this.$message.error("只能上传一个文件,请将上传的文件删除,再上传!");
			return false;
		}
	},
	//文件上传成功
	handleSuccessDoor(res, file, fileList) {
		if (res.code == 0) {
			this.dataform.doorConfigId = res.data
		}
	},
	//文件下载
	handleDownLoadDoor(file) {
		console.log(file,'下载文件')
		if (file.response) {
			const name = file.name.split('.txt')
			this.$http.get(`/psc/doorconfig/${file.response.data}`).then(res => {
				this.downloadFile(res.data.data.doorConfig, name[0], '.txt')
			})
		} else {
			this.downloadFile(file.doorConfig, file.doorName, '.txt')
		}
	},
	//移除门的配置
	handleRemoveDoor() {
		this.fileList = []
		this.dataform.doorConfigId = ''
	},
  },
};
</script>

<style scoped>
.bg {
  /* height: 56vh; */
  padding: 2vh 1.1vw;
  background-color: #fff;
}

.bg >>> .el-upload--picture-card,
.bg >>> .hxImg {
  width: 26.9vw;
  height: 36vh;
  line-height: 36vh;
}
.list-img-box {
  width: 26.9vw;
  height: 36vh;
  /* line-height: 36vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #a6a6a6;
}
.upload-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-upload-list__item-actions {
  width: 26.9vw;
  height: 36vh;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.el-form-item__content:hover .el-upload-list__item-actions {
  visibility: visible;
  transition: 1s;
}
.el-icon-zoom-in:before,
.el-icon-delete:before {
  font-size: 30px;
  color: #fff;
}
.hide .el-upload--picture-card {
  display: none;
}
.el-upload--picture-card i {
  font-size: 20px;
  font-style: normal;
}
.el-upload__tip {
  /* padding-left: 140px; */
  box-sizing: border-box;
  font-size: 14px;
}
.baseHeader {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: rgba(46, 48, 51, 1);
}
.selectWidth {
  width: 187px;
}
.bg>>>.el-form-item{
	margin-bottom: 15px!important;
}
</style>
